{% extends "base.html" %}

{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1>用户设置</h1>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-2 offset-md-1">
      <div class="nav flex-column nav-pills" role="tablist">
        <a class="nav-link active" id="settings-profile-tab" data-toggle="pill" href="#profile" role="tab">简介</a>
        <a class="nav-link" id="settings-ssh-key-tab" data-toggle="pill" href="#ssh-key" role="tab">SSH 公钥</a>
        <a class="nav-link" id="settings-kook-tab" data-toggle="pill" href="#kook" role="tab">KOOK</a>
      </div>
    </div>
    <div class="col-md-8">
      <div class="tab-content" id="v-pills-tabContent">

        <div class="tab-pane fade show active" id="profile" role="tabpanel">
          {% include "components/errors.html" %}

          {% with form = Forms.self.SettingsForm(country=user.country) %}
          {% from "macros/forms.html" import render_extra_fields %}
          <form id="user-profile-form" method="post" accept-charset="utf-8" autocomplete="off" role="form"
            class="form-horizontal">
            <div class="form-group">
              <b>{{ form.name.label }}</b>
              {{ form.name(class="form-control", value=user.name) }}
            </div>
            <div class="form-group">
              <b>{{ form.email.label }}</b>
              {{ form.email(class="form-control", value=user.email) }}
            </div>

            <hr>

            <div class="form-group">
              <b>{{ form.confirm.label }}</b>
              {{ form.confirm(class="form-control") }}
            </div>
            <div class="form-group">
              <b>{{ form.password.label }}</b>
              {{ form.password(class="form-control") }}
            </div>

            <hr>

            <div class="form-group">
              <b>{{ form.affiliation.label }}</b>
              {{ form.affiliation(class="form-control", value=user.affiliation or "") }}
            </div>
            <div class="form-group">
              <b>{{ form.website.label }}</b>
              {{ form.website(class="form-control", value=user.website or "") }}
            </div>
            <div class="form-group">
              <b>{{ form.country.label }}</b>
              {{ form.country(class="form-control custom-select", value=user.country) }}
            </div>
            <div class="form-group">
              <b><label for="hidden">可见性</label></b>
              <select class="form-control custom-select" id="hidden" name="hidden" value="{{ user.hidden }}">
                <option value="False" {{ "selected" if not user.hidden else "" }}>Visible</option>
                <option value="True" {{ "selected" if user.hidden else "" }}>Hidden</option>
              </select>
            </div>

            {{ render_extra_fields(form.extra) }}

            <div id="results" class="form-group">
            </div>

            <div class="form-group">
              {{ form.submit(class="btn btn-md btn-primary float-right") }}
            </div>
          </form>
          {% endwith %}
        </div>

        <div class="tab-pane fade" id="ssh-key" role="tabpanel">

          {% if ssh_keys %}
            <b><label for="enter-name"> 现有 SSH 秘钥</label></b>
            <br>

            {% for key in ssh_keys %}
            <form method="post" id="delete-ssh-key-{{ loop.index }}-form" autocomplete="off">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" id="ssh-key" name="ssh_key" type="text" value="{{ key }}" readonly>
                        <div class="input-group-append ml-1" style="margin: -0.1rem">
                            <button type="submit" class="btn btn-danger" id="delete-ssh-key-button-{{ loop.index }}">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div id="delete-ssh-key-{{ loop.index }}-results" class="form-group">
                </div>
            </form>

            <script>
              document.addEventListener('DOMContentLoaded', function() {
                form_fetch_and_show("delete-ssh-key-{{ loop.index }}", "/pwncollege_api/v1/ssh_key", "DELETE", "你的公钥已经被删除!");
              });
            </script>
            {% endfor %}
            <br>
          {% endif %}

          <form method="post" id="ssh-key-form" autocomplete="off">
            <div class="form-group">
              <b><label for="enter-name">添加新的 SSH 公钥</label></b>
              <small class="form-text text-muted"> 用于通过 `SSH` 远程访问挑战关卡 </small>
              <br>
              <input class="form-control" id="ssh-key" name="ssh_key" type="text" value="">
            </div>

            <div id="ssh-key-results" class="form-group">
            </div>

            <div class="form-group text-right">
              <input class="btn btn-md btn-primary btn-outlined" id="_submit" name="_submit" type="submit" value="Add">
            </div>
          </form>
        </div>

        <div class="tab-pane fade" id="kook" role="tabpanel">
          {% if not kook_user %}
          <a href="{{ url_for('kook.kook_connect') }}">
            <button class="btn btn-primary btn-lg">连接到KOOK</button>
          </a>

          {% else %}
          <h3>你的账户已经连接到KOOK。</h3>
          <div style="margin-bottom: 24px;">用户名: {{ kook_user.username }}</div>

          <a href="{{ url_for('kook.kook_connect') }}">
            <button class="btn btn-primary btn-lg">更换账户</button>
          </a>

          <a href="{{ url_for('kook.kook_disconnect') }}">
            <button class="btn btn-primary btn-lg">解除绑定</button>
          </a>
          {% endif %}
        </div>

        <div class="tab-pane fade" id="tokens" role="tabpanel">
          {% with form = Forms.self.TokensForm() %}
          <form method="POST" id="user-token-form">
            <div class="form-group">
              <b>{{ form.expiration.label }}</b>
              {{ form.expiration(class="form-control") }}
            </div>

            <div class="form-group text-right">
              {{ form.submit(class="btn btn-md btn-primary btn-outlined") }}
            </div>
          </form>
          {% endwith %}

          {% if tokens %}
          <hr>
          <h4 class="text-center">Active Tokens</h4>
          <table class="table table-striped">
            <thead>
              <tr>
                <td class="text-center"><b>Created</b></td>
                <td class="text-center"><b>Expiration</b></td>
                <td class="text-center"><b>Delete</b></td>
              </tr>
            </thead>
            <tbody>
              {% for token in tokens %}
              <tr>
                <td><span data-time="{{ token.created | isoformat }}"></span></td>
                <td><span data-time="{{ token.expiration | isoformat }}"></span></td>
                <td class="text-center">
                  <span class="delete-token" role="button" data-token-id="{{ token.id }}">
                    <i class="btn-fa fas fa-times"></i>
                  </span>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block entrypoint %}
<script defer src="{{ url_for('views.themes', path='js/pages/settings.js') }}"></script>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('views.themes', path='js/dojo/settings.js') }}"></script>
{% endblock %}
